Day22：小事之Media Query

@media (max-width: 767px) { } @media (max-width: 480px) { } @media (min-width: 768px) and (max-width: 979px) { } @media (min-width: 980px) ...

6 天前 · Media queries allow you to apply CSS styles depending on a device's media type (such as print vs. screen) or other features or characteristics. Max-width · Width · Device-width · Media

... media (min-width: 1200px) {}. 當然，你也可以設定你自己覺得適合的break points。 舉例而言，報導者的break points 設定如下：. /* Mobile */ @media (max-width: 767px) ...

/*如果螢幕寬度為768px 以下，就套用css 設定*/ @media screen and (max-width:768px) { ... } 兩個條件同時符合. /*如果螢幕寬度為400px 以上且700px 以下，就套用css ...

@media screen and (max-width: 767px) { // 如果使用者之視窗寬度<= 768px，將會再載入這裡的CSS。 } @media screen and (max-device-width: 480px) {

The solution for you is to add max width: 767.5px. It will work. But in general I would suggest avoiding using both min-width and max-width.

If you want to include both min and max width for responsiveness in the browser, then you can use the following: @media (min-width: 768px) and ...

@media (min-width: 768px) { /* 螢幕寬度大於等於768px時的樣式*/ } @media (max-width: 767px) { /* ... @media screen and (max-width: 575.98px) { ... }

My question is : Should the max-width be 767px or 768px? When I debug in Firefox with design mode set to 768px X 1024px, the breakpoint is not triggered.

Media query is a CSS technique introduced in CSS3. It uses the @media rule to include a block of CSS properties only if a certain condition is true.